<template>
  <div class="analysis-container">
    <el-form @submit.prevent="submitAnalysis">
      <!-- 作物类型 -->
      <el-form-item label="作物类型">
        <el-select v-model="form.cropType" placeholder="请选择作物">
          <el-option
            v-for="crop in crops"
            :key="crop.value"
            :label="crop.label"
            :value="crop.value"
          ></el-option>
        </el-select>
      </el-form-item>
      
      <!-- 病虫害类型 -->
      <el-form-item label="病虫害类型">
        <el-input
          v-model="form.pestType"
          placeholder="请输入病虫害类型"
        ></el-input>
      </el-form-item>

      <!-- 问题描述 -->
      <el-form-item label="问题描述">
        <el-input
          type="textarea"
          v-model="form.description"
          placeholder="详细描述作物问题"
        ></el-input>
      </el-form-item>

      <!-- 提交按钮 -->
      <el-button type="primary" native-type="submit">提交分析</el-button>
    </el-form>

    <!-- 显示分析结果 -->
    <div v-if="analysisResult" class="result">
      <h3>专家建议：</h3>
      <div v-html="analysisResult"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        cropType: '',    // 作物类型
        pestType: '',    // 病虫害类型
        description: ''  // 问题描述
      },
      crops: [
        { value: 'rice', label: '水稻' },
        { value: 'wheat', label: '小麦' },
        { value: 'corn', label: '玉米' }
      ],
      analysisResult: null
    };
  },
  methods: {
    async submitAnalysis() {
      try {
        // 假设需要传递form数据给后端接口
        const response = await this.$api.getAnalysis(this.form); // 替换为实际接口调用方式
        this.analysisResult = response.data.advice;
      } catch (error) {
        console.error('分析提交失败: ', error);
        this.analysisResult = '提交分析失败，请稍后重试';
      }
    }
  }
};
</script>

<style>
.analysis-container {
  width: 80%;
  margin: 20px auto;
}
.result {
  margin-top: 20px;
}
</style>
